// 导入Manager组件
import Manager, { TableColumnConfig } from "../../component/Manager/index.tsx";
import { useConfig } from "../../hook/D8dConfigProvider.tsx";
import dayjs from "dayjs";
import AdminImage from "../../component/AdminImage/index.tsx";
import type { DetailFieldConfig, FormItemConfigs } from "../../global.ts";

export default function AdManagerPage() {
  const { sysConfig } = useConfig();
  const apiConfig = {
    search: "/v1/admin/ad",
    edit: "/v1/admin/ad",
    add: "/v1/admin/ad",
    delete: "/v1/admin/ad",
  };

  const tableColumnConfig = [
    {
      title: "序号",
      dataIndex: "_index",
      key: "_index",
      fixed: "left",
      width: 80,
    },
    {
      title: "广告位",
      dataIndex: "ad_id",
      key: "ad_id",
      fixed: "left",
      ellipsis: true,
      render: (text) => {
        return (
          sysConfig["广告位"]?.find((item: any) => item?.value === text)
            ?.label ?? text
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
      fixed: "left",
    },
    {
      title: "排序",
      dataIndex: "sort",
      key: "sort",
      fixed: "left",
    },
    {
      title: "链接地址",
      dataIndex: "link_url",
      key: "link_url",
      width: 100,
      ellipsis: true,
    },
    {
      title: "图片地址",
      dataIndex: "image_url",
      key: "image_url",
      width: 150,
      render: (text) => {
        return <AdminImage src={text} height={30} />;
      },
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      key: "is_disabled",
      render: (text) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      key: "updated_at",
      render: (text) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
    },
  ] as TableColumnConfig[];

  const searchFormFieldConfig: FormItemConfigs[] = [
    {
      label: "关键字",
      name: "keyword",
      type: "input",
      placeholder: "标题",
    },
    {
      label: "广告位",
      name: "ad_id",
      type: "select",
      options: sysConfig["广告位"],
    },
  ];

  const addFormFieldConfig: FormItemConfigs[] = [
    {
      label: "广告位",
      name: "ad_id",
      type: "select",
      options: sysConfig["广告位"],
      rules: [{ required: true, message: "请选择广告位" }],
    },
    {
      label: "标题",
      name: "title",
      type: "input",
      rules: [{ required: true, message: "请输入标题" }],
    },
    {
      label: "链接地址",
      name: "link_url",
      type: "input",
      rules: [{ required: true, message: "请输入链接地址" }],
    },
    {
      label: "图片",
      name: "image_url",
      type: "upload",
      maxCount: 1,
      listType: "picture-card",
      rules: [{ required: true, message: "请上传图片" }],
    },
    {
      label: "排序",
      name: "sort",
      type: "number",
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: [
        { label: "启用", value: 0 },
        { label: "禁用", value: 1 },
      ],
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const editFormFieldConfig: FormItemConfigs[] = [
    {
      label: "ID",
      name: "id",
      type: "hidden",
    },
    {
      label: "广告位",
      name: "ad_id",
      type: "select",
      options: sysConfig["广告位"],
      rules: [{ required: true, message: "请选择广告位" }],
    },
    {
      label: "标题",
      name: "title",
      type: "input",
      rules: [{ required: true, message: "请输入标题" }],
    },
    {
      label: "链接地址",
      name: "link_url",
      type: "input",
      rules: [{ required: true, message: "请输入链接地址" }],
    },
    {
      label: "图片",
      name: "image_url",
      type: "upload",
      maxCount: 1,
      listType: "picture-card",
      rules: [{ required: true, message: "请上传图片" }],
    },
    {
      label: "排序",
      name: "sort",
      type: "number",
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: [
        { label: "启用", value: 0 },
        { label: "禁用", value: 1 },
      ],
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const detailFieldConfig = [
    {
      title: "序号",
      dataIndex: "_index",
    },
    {
      title: "ID",
      dataIndex: "id",
    },
    {
      title: "广告位",
      dataIndex: "ad_id",
      render: (text) => {
        return (
          sysConfig["广告位"]?.find((item: any) => item?.value === text)
            ?.label ?? text
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "排序",
      dataIndex: "sort",
    },
    {
      title: "链接地址",
      dataIndex: "link_url",
      span: 2,
    },
    {
      title: "图片",
      dataIndex: "image_url",
      span: 2,
      render: (text) => (
        <AdminImage src={text} alt="" style={{ width: "100%" }} preview />
      ),
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      render: (text) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      render: (text) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      render: (text) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
  ] as DetailFieldConfig[];

  return (
    <Manager
      apiConfig={apiConfig}
      tableColumnConfig={tableColumnConfig}
      searchFormFieldConfig={searchFormFieldConfig}
      editFormFieldConfig={editFormFieldConfig}
      addFormFieldConfig={addFormFieldConfig}
      detailFieldConfig={detailFieldConfig}
      enableAdd
      enableEdit
      enableDelete
      defaultViewType="list"
    />
  );
}
